<template>
  <div class="LoginBody">
    <div class="LoginLogo">
      <img src="../assets/images/logo.png" alt="" />
    </div>
    <div class="LoginForm">
      <h1>河北省基层医疗卫生机构管理信息系统</h1>
      <div class="Ewm">
        <!-- <img src="../assets/images/ewm.png" alt="" /> -->
        <a-qrcode error-level="H" value="http://60.205.235.24/msg" size="220" />
      </div>
      <div class="LoginFormBorder">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          stretch="true"
          @tab-change="handleClick"
        >
          <el-tab-pane label="登录" name="login">
            <el-form :model="form" ref="form" :rules="rules">
              <el-form-item prop="username">
                <el-input
                  v-model="form.username"
                  type="text"
                  placeholder="输入账号"
                  autocomplete="off"
                >
                  <template #prepend>
                    <el-icon>
                      <User />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="form.password"
                  type="password"
                  placeholder="输入密码"
                  autocomplete="off"
                >
                  <template #prepend>
                    <el-icon>
                      <Key />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="icode">
                <el-input
                  v-model="form.icode"
                  type="text"
                  placeholder="验证码"
                  autocomplete="off"
                  style="width: 93px; /*  width: 293px; */ margin-right: 10px"
                  @keyup.enter="Login"
                />
                <div class="code" @click="refreshCode">
                  <s-identify :identifyCode="identifyCode"></s-identify>
                </div>
              </el-form-item>

              <el-button type="success" style="width: 100%" @click="Login()"
                >登录</el-button
              >
            </el-form>
            <a style="color: blue; cursor: pointer" @click="forgotPassword()"
              >忘记密码?</a
            >
          </el-tab-pane>
          <el-tab-pane label="注册" name="register">
            Welcome to
            <span
              @click="dialogRegisterVisible = true"
              style="color: blue; cursor: pointer"
              >Register!</span
            >
            <el-dialog
              v-model="dialogRegisterVisible"
              title="新用户注册"
              style="width: 400px"
              :close-on-click-modal="false"
              :show-close="false"
            >
              <el-form
                :model="rform"
                ref="rform"
                class="registerForm"
                :rules="rules"
              >
                <el-form-item class="el-form-item" prop="name">
                  <!-- label="姓　名" -->
                  <el-input
                    v-model="rform.name"
                    placeholder="负责人姓名"
                    autocomplete="off"
                    class="el-input"
                  />
                </el-form-item>
                <el-form-item prop="telephone">
                  <el-input
                    v-model="rform.telephone"
                    placeholder="手机号码"
                    autocomplete="off"
                  />
                </el-form-item>
                <el-form-item prop="idcard">
                  <el-input
                    v-model="rform.idcard"
                    placeholder="身份证号码"
                    autocomplete="off"
                  />
                </el-form-item>
                <el-form-item prop="email">
                  <el-input
                    v-model="rform.email"
                    placeholder="邮箱"
                    autocomplete="off"
                  />
                </el-form-item>
                <el-form-item prop="license">
                  <el-input
                    v-model="rform.license"
                    placeholder="医师执业证书编号"
                    autocomplete="off"
                  />
                </el-form-item>

                <el-form-item prop="address">
                  <el-input
                    v-model="rform.address"
                    placeholder="工作地址(只需填具体农村名即可)"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="closed()">关闭</el-button>
                  <el-button
                    type="primary"
                    :plain="true"
                    @click="SubmitRegister"
                  >
                    提交注册申请
                  </el-button>
                </span>
              </template>
            </el-dialog>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import SIdentify from "./utils/Identify.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ToLogin, register } from "@/api/login.js";
export default {
  name: "Login",
  components: { SIdentify },
  data() {
    return {
      rules: {
        username: [
          {
            required: true,
            message: "请输入6-10位账号",
            pattern: /^[\w-]{6,10}$/,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        telephone: [
          {
            required: true,
            message: "请输入联系电话",
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            trigger: "blur",
          },
        ],
        idcard: [
          {
            required: true,
            message: "请输入身份证号",
            pattern:
              /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
            trigger: "blur",
          },
        ],
        license: [
          {
            required: true,
            message: "请输入医师执业证书编号",
            pattern: /^\d{15}$/,
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            pattern:
              /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            trigger: "blur",
          },
        ],
      },
      identifyCode: "",
      identifyNums: "1234567890",
      identifyLetters: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
      dialogRegisterVisible: false,
      activeName: ref("login"),
      form: {
        username: "",
        password: "",
        icode: "",
      },
      rform: {
        name: "",
        telephone: "",
        email: "",
        idcard: "",
        license: "",
        address: "",
      },
      resicode: "",
    };
  },
  methods: {
    closed() {
      this.dialogRegisterVisible = false;
      this.$refs["rform"].resetFields();
    },
    handleClick() {
      if (this.activeName == "register") {
        this.dialogRegisterVisible = true;
      }
    },
    SubmitRegister() {
      this.$refs.rform.validate((valid) => {
        if (valid) {
          register(this.rform).then((res) => {
            if (res.data.code == 200) {
              ElMessage({
                message: "提交注册申请成功",
                type: "success",
              });
              this.dialogRegisterVisible = false;
              this.$refs["rform"].resetFields();
            } else {
              ElMessage({
                message: "注册失败，请联系管理员",
                type: "error",
              });
            }
          });
        }
      });
    },
    resetForm() {
      this.$refs["form"].resetFields();
    },
    Login() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (
            this.form.icode.toLowerCase() == this.identifyCode.toLowerCase()
          ) {
            ToLogin(this.form).then((res) => {
              if (res.data.code == 200) {
                localStorage.setItem("username", this.form.username);
                localStorage.setItem("role", 2);
                ElMessage({
                  message: "登陆成功",
                  type: "success",
                });
                this.$router.push("/home");
              }
              if (res.data.code == 205) {
                ElMessage({
                  message: "账号申请暂未通过,请确认通过后重试。",
                  type: "warning",
                });
                this.refreshCode();
                this.resetForm();
              }
              if (res.data.code == 305) {
                ElMessage({
                  message: "账号申请已被拒绝,请联系管理员。",
                  type: "error",
                });
                this.refreshCode();
                this.resetForm();
              }
              if (res.data.code == 300) {
                ElMessage({
                  message: "账号与使用端口不符",
                  type: "warning",
                });
                this.refreshCode();
                this.resetForm();
              }
              if (res.data.code == 500) {
                ElMessage({
                  message: "账号不存在,请检查无误后重新输入。",
                  type: "error",
                });
                this.refreshCode();
                this.resetForm();
              }
              if (res.data.code == 202) {
                ElMessage({
                  message: "密码错误,请重新输入。",
                  type: "error",
                });
                this.refreshCode();
                this.resetForm();
              }
            });
          } else {
            ElMessage({
              message: "验证码错误",
              type: "warning",
            });
            this.refreshCode();
            this.form.icode = "";
          }
        }
      });
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(4);
    },
    makeCode(l) {
      for (let i = 0; i < l; i++) {
        if (this.randomNum(0, 10) < 5) {
          this.identifyCode +=
            this.identifyNums[this.randomNum(0, this.identifyNums.length)];
        } else {
          this.identifyCode +=
            this.identifyLetters[
              this.randomNum(0, this.identifyLetters.length)
            ];
        }
      }
      console.log(this.identifyCode);
    },
    forgotPassword() {
      this.$router.push({
        path: "/forgotpassword",
      });
    },
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(4);
  },
};
</script>
<style scoped>
.registerForm {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

.registerForm .el-form-item {
  width: 250px;
}

.LoginBody {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("../assets/images/loginback.jpg");
  background-size: cover;
}

h1 {
  text-align: center;
  font-size: 25px;
  margin-top: 10px;
  font-family: "楷体";
}

.LoginForm {
  border: 15px solid paleturquoise;
  width: 600px;
  height: 380px;
  background-color: white;
  position: absolute;
  right: 0;
  margin-right: 10%;
  box-shadow: -10px 10px 30px paleturquoise;
}

.Ewm {
  margin-top: 30px;
  margin-left: 30px;
  position: absolute;
}

.LoginFormBorder {
  padding-left: 50px;
  width: 350px;
  /* width:35vw; */
  height: 45vh;
  position: absolute;
  right: 0;
  padding-right: 40px;
}

/*去掉切换时el-tab-pane底部的蓝色下划线*/
/* ::v-deep .el-tabs__nav-wrap::after {
    background-color: rgba(255, 29, 82, 0.6);
} */

.LoginLogo,
.LoginBody {
  display: flex;
  align-items: center;
  justify-content: center;
}

.LoginLogo {
  width: 500px;
  height: 700px;
  position: absolute;
  left: 150px;
}

.LoginLogo img {
  width: 600px;
}

a {
  margin-top: 10px;
  text-decoration: none;
  font-size: 12px;
  float: right;
}
</style>
